<template>
  <div>
    <ManualSelectedRows
        :fields="fields"
        v-if="selectedRows.length"
        :formDefinition="formDefinition"
        :manualConfig="manualConfig"
        @ok="handleOK"
        :selectedRows="selectedRows"/>
    <div class="relation-form-list-footer">
      <div style="flex: 0.5; text-align: center" @click="() => emits('toggleSelectAll')">
        <a style="color: var(--van-primary-color)" v-if="selectionType !== 'radio'">
          {{ selectAll ? '取消全选' : '全选' }}
        </a>
      </div>
      <van-button @click="handleSelectedOk" size="small" round type="primary" style="flex: 0.5">确定</van-button>
    </div>
  </div>
</template>
<script setup>
import {createProps} from '@/utils';
import ManualSelectedRows from '@comp/FormEngine/field/relation/RelationFormList/ManualSelectedRows.vue';
import {computed} from 'vue';

defineOptions({name: 'RelationFormListFooter'});
const emits = defineEmits(['toggleSelectAll', 'update:selectedRows', 'selectedOk'])
const props = defineProps({
  selectAll: createProps(Boolean),
  selectedRows: createProps(Array),
  selectionType: createProps(String),
  formDefinition: createProps(Object, () => undefined),
  manualConfig: createProps(Object, () => undefined),
});

const fields = computed(() => {
  return props.manualConfig?.manual?.fieldColumns || []
})

function handleSelectedOk() {
  emits('selectedOk');
}
function handleOK(selectedRows) {
  emits('update:selectedRows', selectedRows);
}
</script>
<style scoped lang="less">
.relation-form-list-footer {
  background: white;
  padding: 5px 10px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--van-border-color);
  display: flex;
}
</style>